<template>
  <div class="header">
    <div class="head_top">
      <div class="head_top_1">
        <div class="left">
          <ul>
            <li>🗺️中国大陆</li>
            <li @click="routerIndex">🏠主页</li>
            <li @click="login">🔑欢迎登陆</li>
            <li v-show="vis" style="color: red" @click="login">📝注册请点击</li>
          </ul>
        </div>
        <div class="right">
          <ul>
            <li @click="userfile">👤个人中心</li>
            <li @click="collect">⭐我的收藏</li>
            <li @click="mycart" class="cart">
              📜历史记录
            </li>
            <li @click="mycources">📁我的资源</li>
            <li>❤️我的关注</li>
            <li>🌍社区列表</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="head_center">
      <div class="head_center_1">
        <div class="text">在线学习</div>
        <div class="search">
          <div class="search_input" @keyup.enter="searchSelect">
            <el-autocomplete
              v-model="state"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入内容"
              style="
                width: 600px;
                border: 2px solid #3776da;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
              "
              @select="handleSelect"
              @focus="handleFocus"
            ></el-autocomplete>
            <el-button
              type="primary"
              icon="el-icon-search"
              style="
                height: 51px;
                background-color: #3776da;
                border-radius: 0%;
                border: 2px solid #3776da;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
              "
              @click="searchSelect"
              >搜索</el-button
            >
            <div class="hot_search">
              <span>热门搜索：</span>
              <i
                class="iconfont icon-a-tonghuashunsousuoye-reduhuo-icon"
                style="color: red; margin-left: -10px"
              ></i>
              <span
                class="tag"
                @click="getHotWord(item)"
                v-for="item in hotSearch.filter((item) => item !== '')"
                :key="item"
                >{{ item }}
              </span>
            </div>
          </div>

          <div class="search_text"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted } from "vue";
export default {
  name: "header",
  components: {},
  data() {
    return {
      autoValue: [],
      restaurants: [],
      state: "",
      timeout: null,
      selectValue: "",
      hotSearch: [],
      vis: true,
    };
  },
  methods: {
    querySearchAsync(queryString, cb) {
      this.$http
        .get(`/api/es/suggestion?key=${queryString}`)
        .then((res) => {
          const data = res.data.data;
          // 将每个值前面添加'value'
          const suggestionsWithValue = data.map((item) => ({ value: item }));
          // 保存处理后的数据到组件的数据属性中
          this.autoValue = suggestionsWithValue;
          // 调用回调函数并传递处理后的数据
          cb(this.autoValue);

          // 在获取数据后执行的代码放在这里
          clearTimeout(this.timeout);
          this.timeout = setTimeout(() => {
            cb(this.autoValue);
          });
        })
        .catch((error) => {
          // 在这里您可以根据需要处理请求失败的情况
        });
    },

    createStateFilter(queryString) {
      return (state) => {
        return state.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      };
    },
    handleSelect(item) {
      this.selectValue = item.value;
    },

    routerIndex() {
      this.$router.push("/");
    },

    searchSelect() {
      if (this.state === "") {
        this.$message({
          message: "请输入搜索内容",
          type: "warning",
        });
      } else {
        const currentQuery = this.$route.query.key;
        if (currentQuery !== this.state) {
          // Only navigate if the key has changed
          this.$router.push({ path: "/search", query: { key: this.state } });
        }
      }
    },
//显示注册页面
    isRegister() {
      if(localStorage.getItem("token") != null) {
        this.vis = false;
      } 
    },
    // 点击热门搜索
    getHotWord(item) {
      this.state = item;
      this.searchSelect();
    },
    // 获取焦点时改变边框颜色
    handleFocus() {
      document.querySelector(".el-autocomplete input").style.borderColor =
        "#3776da";
    },

    login() {
      this.$router.push("/login");
    },
    // 跳转到购物车
    mycart() {
      this.$router.push("/history");
    },
    // 跳转到收藏
    collect() {
      this.$router.push("/collect");
    },
    // 获取热门搜索
    getHotSearch() {
      this.$http.get("/api/es/hot").then((res) => {
        this.hotSearch = res.data.data;
      });
    },
    // 跳转到我的课程
    mycources() {
      this.$router.push("/mycourse");
    },
    // 跳转到个人中心
    userfile() {
      this.$router.push("/profile");
    },
  },
  mounted() {
    this.getHotSearch();
    this.isRegister();
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 160px;
  background: rgb(237, 239, 241);

  .head_top {
    height: 40px;
    background: rgb(245, 245, 245);

    .head_top_1 {
      width: 1400px;
      margin: 0 auto;
      height: 40px;
      cursor: default;
    }

    .left {
      float: left;
      margin-left: 60px;
      ul {
        li {
          color: #6c6c6c;
          font-size: 13px;
          float: left;
          margin-right: 30px;
        }
      }
    }

    .right {
      float: right;
      ul {
        li {
          color: #6c6c6c;
          font-size: 13px;
          float: left;
          margin-right: 30px;
        }
      }
    }
    .right ul li:hover {
      color: #3776da;
    }
    .left ul li:hover {
      color: #3776da;
    }
  }

  .head_center {
    height: 120px;
    width: 1400px;
    margin: 0 auto;

    .head_center_1 {
      height: 120px;
      padding-left: 180px;
      padding-right: 80px;
      .text {
        float: left;
        font-family: Helvetica;
        font-weight: bold;
        line-height: 120px;
        font-size: 40px;
        color: #3776da;
      }
    }
    .search_input {
      float: left;
      margin-top: 40px;
      margin-left: 80px;

      .hot_search {
        margin-top: 5px;
        span {
          color: #6c6c6c;
          font-size: 14px;
          margin-right: 10px;
        }
        .tag:hover {
          color: #3776da;
          cursor: pointer;
        }
      }
    }
  }
  /deep/ .el-input__inner {
    height: 47px;
    line-height: 60px;
  }
}
</style>